<template>
  <el-dialog
      class="m-dialog"
      v-model="visible"
      v-bind="{...$props, ...$attrs}"
      @close="emits('close')"
      @keydown.esc="handleCancel()"
  >
    <template #header>
      <div>
        <slot name="header" :data="$data">
          <m-dialog-header
              :title="title"
              :subtitle="subtitle"
              :config="$config"
          ></m-dialog-header>
        </slot>
      </div>
      <div>
        <template v-if="hasHeader">
          <slot name="header-tool" :data="$data"></slot>
          <el-divider direction="vertical"></el-divider>
        </template>
        <el-button
            size="small"
            style="padding: 3px 6px"
            type="danger"
            :disabled="loading"
            @click="handleCancel"
        >
          <fa icon="close"></fa>
        </el-button>
      </div>
    </template>
    <template #default>
      <div
          v-loading="loading"
          class="m-dialog-body"
          element-loading-background="rgba(0,0,0,0)"
          element-loading-text=""
          element-loading-svg="-"
      >
        <slot :data="$data"></slot>
      </div>
    </template>
    <template #footer v-if="showFooter">
      <el-space>
        <slot v-if="hasFooter" name="footer-tool" :data="$data"/>
      </el-space>
      <el-space v-if="confirm!==undefined">
        <el-button
            type="success"
            :loading="loading"
            @click="handleConfirm"
        >
          {{ confirmButtonText }}
        </el-button>
        <el-button
            type="info"
            :loading="loading"
            @click="handleCancel"
        >
          {{ cancelButtonText }}
        </el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {computed, ref, useSlots} from "vue";
import _ from 'lodash'
import {
  morghulisDialogPropsDefaults,
  type MorghulisDialogProps,
  type MorghulisDialogConfig
} from "../../types/dialog/dialog.types.ts";
import MDialogHeader from "./MDialogHeader.vue";


let emits = defineEmits(['close', 'update:title', 'update:subtitle'])
let props = withDefaults(
    defineProps<MorghulisDialogProps>(),
    morghulisDialogPropsDefaults
)

/**
 * 功能区
 */
const slots = useSlots();
const hasHeader = computed(() => !!slots.header)
const hasFooter = computed(() => !!slots.footer)
const showFooter = hasFooter.value || !!props.confirm


const loading = ref(false)
const $data = ref({})
const $config = ref<MorghulisDialogConfig>({})
const visible = ref(false)


function open(data: any = {}, config?: MorghulisDialogConfig) {
  $config.value = config || {}
  $data.value = _.cloneDeep(data)
  visible.value = true
}

function close() {
  loading.value = false
  visible.value = false
}

function handleConfirm() {
  loading.value = true
  props.confirm($data.value, close)
}

function handleCancel() {
  loading.value = true
  props.cancel($data.value, close)
}

defineExpose({open, close})

</script>

<style>

</style>